<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <meta content="telephone=no" name="format-detection"/>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <title>
        js调用java
    </title>
</head>

<body>
<p>
    <xmp id="show">
    </xmp>
</p>
<p>
    <xmp id="init">
    </xmp>
</p>
<p>
    <input type="text" id="text1" value="用户名(username)"/>
</p>

<p>
    <input type="text" id="text2" value="password"/>
</p>

<p>
    <input type="button" id="enter" value="发消息给Native" onclick="testClick();"
    />
</p>

<p>
    <input type="button" id="enter1" value="调用Native方法" onclick="testClick1();"
    />
</p>

<p>
    <input type="button" id="enter2" value="显示源代码" onclick="testDiv();"/>
</p>

<p>
    <input type="file" id="open" value="打开文件" onclick="onOpen();"/>
</p>

<p>
    <input type="button" id="btn1" value="call"><br>
    <input type="button" id="btn2" value="checkApi"><br>
    <input type="button" id="btn3" value="logout"><br>
    <input type="button" id="btn_multi" value="选择多图">
</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>
    <input type="text" id="" value="用户名(username)"/>
</p>
</body>
<script>

    $(function () {
        $('#btn3').click(function () {
            window.YzJSBridge.call(
                    'exitApp'
                    , ""
                    , function (responseData) {
                        document.getElementById("show").innerHTML = " " + responseData
                    }
            );
        });
        $('#btn_multi').click(function(){
        var data = {compress:{sizeLimit:1024,unit:"k"},crop:{heightRatio:400,widthRatio:300},format:"JPG",maxNum:3}
            window.YzJSBridge.call(
                'selectPicture'
                ,data
                ,function(responseData){
                    document.getElementById("show").innerHTML ="select multi get responseData from java ,data = "+responseData
                }
            );
        })
        $('#btn1').click(function () {
            alert(window.YzJSBridge);
            //var data = "name=" + "str1" + ",pass=" + "str2";
            var data = {compress:{sizeLimit:1024,unit:"k"},crop:{heightRatio:400,widthRatio:300},format:"JPG"}

            window.YzJSBridge.call(
                    'takePicture'
                    , data
                    , function (responseData) {
                        document.getElementById("show").innerHTML = "aaaasend get responseData from java, data = " + responseData
                    }
            );
//alert('123');
            //testClick1();
        });

        $('#btn2').click(function () {
            window.YzJSBridge.call(
                    'checkApi'
                    , {'apiName':'logout'}
                    , function (responseData) {
                        document.getElementById("show").innerHTML = " " + responseData
                    }
            );
        });
    })

    function onOpen() {
        var str1 = document.getElementById("text1").value;
        var str2 = document.getElementById("text2").value;
        var data = "name=" + str1 + ",pass=" + str2;
        //call native method


        window.WebViewJavascriptBridge.callHandler(
                'functionOpen'
                , {'param': data}
                , function (responseData) {
                    //document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData;


                }
        );
    }
    function testDiv() {
        document.getElementById("show").innerHTML = document.getElementsByTagName("html")[0].innerHTML;
    }
    function testClick() {
        var str1 = document.getElementById("text1").value;
        var str2 = document.getElementById("text2").value;
        //发送消息给java本地代码
        var data = {id: 1, content: "这是一个图片 <img src=\"a.png\"/> test\r\nhahaha"};
        window.WebViewJavascriptBridge.send(
                data
                , function (responseData) {
                    document.getElementById("show").innerHTML = "repsonseData from java, data = " + responseData
                }
        );
    }
    function testClick1() {
        var str1 = document.getElementById("text1").value;
        var str2 = document.getElementById("text2").value;
        var data = "name=" + str1 + ",pass=" + str2;

        alert(window.WebViewJavascriptBridge);
        //window.YzJSBridge=window.WebViewJavascriptBridge;
        alert(window.YzJSBridge);
        //call native method
        window.YzJSBridge.call(
                'call'
                , {'param': data}
                , function (responseData) {
                    document.getElementById("show").innerHTML = "aaaasend get responseData from java, data = " + responseData
                }
        );
    }
    function bridgeLog(logContent) {
        document.getElementById("show").innerHTML = logContent;
    }
    function connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function () {
                        callback(WebViewJavascriptBridge)
                    },
                    false
            );
        }
    }
    // 第一连接时初始化bridage
//    connectWebViewJavascriptBridge(function (bridge) {
//        bridge.init(function (message, responseCallback) {
//            console.log('JS got a message', message);
//            var data = {
//                'Javascript Responds': '测试中文!'
//            };
//            console.log('JS responding with', data);
//            responseCallback(data);
//        });
//        // 注册一个"functionInJs",
//        bridge.registerHandler("functionInJs", function (data, responseCallback) {
//
//            document.getElementById("show").innerHTML = ("data from Java: = " + data);
//            var responseData = "Javascript Says  我要你的地址!";
//            // response层
//            responseCallback(responseData);
//        });
//    })
//    bridge.init(function (message, responseCallback) {
//        console.log('JS got a message', message);
//        var data = {
//            'Javascript Responds': 'Wee!'
//        };
//        console.log('JS responding with', data);
//        responseCallback(data);
//    });

</script>

</html>